<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流实时监控系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; }
        :root {
            --primary: #2c3e50; --secondary: #3498db; --success: #2ecc71; 
            --warning: #f39c12; --danger: #e74c3c; --light: #ecf0f1; 
        }
        body { background: linear-gradient(135deg, #1a2a6c, var(--primary)); color: var(--light); min-height: 100vh; }
        .navbar { background: rgba(26, 37, 48, 0.95); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
        .logo { display: flex; align-items: center; gap: 12px; }
        .logo i { font-size: 1.8rem; color: var(--secondary); }
        .logo h1 { font-size: 1.4rem; background: linear-gradient(90deg, var(--secondary), var(--success)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .nav-links { display: flex; gap: 15px; }
        .nav-link { color: var(--light); text-decoration: none; padding: 8px 15px; border-radius: 20px; display: flex; align-items: center; gap: 8px; }
        .nav-link.active, .nav-link:hover { background: rgba(52, 152, 219, 0.2); }
        .container { max-width: 1200px; margin: 20px auto; padding: 0 15px; }
        .header { text-align: center; margin-bottom: 25px; }
        .header h2 { font-size: 1.8rem; margin-bottom: 8px; background: linear-gradient(90deg, var(--secondary), var(--success)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .header p { color: #bdc3c7; font-size: 1rem; max-width: 700px; margin: 0 auto; }
        .panel { background: rgba(26, 37, 48, 0.8); border-radius: 12px; padding: 20px; margin-bottom: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
        .panel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: var(--secondary); padding-bottom: 10px; border-bottom: 1px solid rgba(127,140,141,0.3); }
        .panel-header i { font-size: 1.3rem; }
        .panel-header h3 { font-size: 1.3rem; }
        .map-container { height: 350px; border-radius: 10px; overflow: hidden; background: rgba(44,62,80,0.6); margin-bottom: 20px; position: relative; }
        #map { height: 100%; width: 100%; }
        .map-overlay { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.7); padding: 12px; border-radius: 8px; z-index: 1000; max-width: 180px; }
        .map-overlay h4 { margin-bottom: 8px; font-size: 0.9rem; }
        .legend { display: flex; flex-direction: column; gap: 6px; }
        .legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
        .legend-color { width: 12px; height: 12px; border-radius: 50%; }
        .alert-list { max-height: 300px; overflow-y: auto; }
        .alert-item { background: rgba(231,76,60,0.2); border-left: 3px solid var(--danger); padding: 12px; margin-bottom: 10px; border-radius: 0 6px 6px 0; }
        .alert-item.warning { background: rgba(243,156,18,0.2); border-left: 3px solid var(--warning); }
        .alert-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
        .alert-time { font-size: 0.8rem; color: #bdc3c7; }
        .alert-content { font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
        .stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-top: 20px; }
        .stat-card { background: rgba(44,62,80,0.6); border-radius: 8px; padding: 15px; text-align: center; }
        .stat-card i { font-size: 1.8rem; margin-bottom: 10px; color: var(--secondary); }
        .stat-value { font-size: 1.5rem; font-weight: bold; color: var(--success); margin: 5px 0; }
        .stat-label { font-size: 0.85rem; color: #bdc3c7; }
        .notification { position: fixed; top: 20px; right: 20px; background: var(--primary); border-left: 4px solid var(--danger); color: white; padding: 12px 18px; border-radius: 6px; display: flex; align-items: center; gap: 12px; z-index: 2000; transform: translateX(120%); transition: transform 0.5s; max-width: 320px; }
        .notification.show { transform: translateX(0); }
        .notification.warning { border-left: 4px solid var(--warning); }
        .notification i { font-size: 1.6rem; color: var(--danger); }
        .notification.warning i { color: var(--warning); }
        .notification-content h4 { margin-bottom: 4px; font-size: 1.1rem; }
        .notification-content p { font-size: 0.9rem; color: #bdc3c7; }
        @media (max-width: 768px) {
            .navbar { flex-direction: column; gap: 10px; }
            .nav-links { width: 100%; justify-content: space-around; }
            .header h2 { font-size: 1.5rem; }
        }
    </style>
</head>
<body>
    <div class="notification" id="notification">
        <i class="fas fa-exclamation-circle"></i>
        <div class="notification-content">
            <h4>超速告警</h4>
            <p>货车A-2356在G15高速超速行驶 (105km/h)</p >
            <p class="alert-time">10秒前 · 位置: 南京方向58公里</p >
        </div>
    </div>
    
    <nav class="navbar">
        <div class="logo">
            <i class="fas fa-truck-moving"></i>
            <h1>物流智能监控</h1>
        </div>
        <div class="nav-links">
            <a href=" " class="nav-link active">
                <i class="fas fa-map-marked-alt"></i>
                <span>实时监控</span>
            </a >
            <a href="quote.html" class="nav-link">
                <i class="fas fa-file-invoice-dollar"></i>
                <span>预约报价</span>
            </a >
        </div>
    </nav>
    
    <div class="container">
        <div class="header">
            <h2>物流实时监控中心</h2>
            <p>实时监控车辆位置，即时获取异常告警，确保运输安全高效</p >
        </div>
        
        <div class="panel">
            <div class="panel-header">
                <i class="fas fa-map-marked-alt"></i>
                <h3>车辆实时位置</h3>
            </div>
            
            <div class="map-container">
                <div id="map"></div>
                <div class="map-overlay">
                    <h4>车辆状态图例</h4>
                    <div class="legend">
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #3498db;"></div>
                            <span>正常行驶</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #e74c3c;"></div>
                            <span>超速告警</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #f1c40f;"></div>
                            <span>路线偏离</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="stats-container">
                <div class="stat-card">
                    <i class="fas fa-truck-loading"></i>
                    <div class="stat-value">142</div>
                    <div class="stat-label">今日运单量</div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-clock"></i>
                    <div class="stat-value">96.4%</div>
                    <div class="stat-label">准时率</div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-road"></i>
                    <div class="stat-value">18.6h</div>
                    <div class="stat-label">平均运输时间</div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-exclamation-circle"></i>
                    <div class="stat-value">8</div>
                    <div class="stat-label">今日告警</div>
                </div>
            </div>
        </div>
        
        <div class="panel">
            <div class="panel-header">
                <i class="fas fa-exclamation-triangle"></i>
                <h3>实时告警中心</h3>
            </div>
            
            <div class="alert-list" id="alertList">
                <div class="alert-item warning">
                    <div class="alert-header">
                        <strong>异常停留</strong>
                        <span class="alert-time">2分钟前</span>
                    </div>
                    <div class="alert-content">
                        <i class="fas fa-car"></i>
                        <span>货车C-7842在服务区停留超时(45分钟)</span>
                    </div>
                </div>
                
                <div class="alert-item">
                    <div class="alert-header">
                        <strong>超速告警</strong>
                        <span class="alert-time">5分钟前</span>
                    </div>
                    <div class="alert-content">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>货车B-5698在G42高速超速行驶(98km/h)</span>
                    </div>
                </div>
                
                <div class="alert-item warning">
                    <div class="alert-header">
                        <strong>路线偏离</strong>
                        <span class="alert-time">12分钟前</span>
                    </div>
                    <div class="alert-content">
                        <i class="fas fa-route"></i>
                        <span>货车D-3267偏离预定路线超过5公里</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化地图
        const map = L.map('map').setView([34.0522, -118.2437], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);
        
        // 添加标记
        const markers = [];
        for (let i = 0; i < 12; i++) {
            const lat = 34.0522 + (Math.random() - 0.5) * 10;
            const lng = -118.2437 + (Math.random() - 0.5) * 20;
            const marker = L.marker([lat, lng]).addTo(map);
            markers.push(marker);
        }
        
        // 移动标记模拟实时位置
        setInterval(() => {
            markers.forEach(marker => {
                const lat = marker.getLatLng().lat + (Math.random() - 0.5) * 0.1;
                const lng = marker.getLatLng().lng + (Math.random() - 0.5) * 0.1;
                marker.setLatLng([lat, lng]);
            });
        }, 5000);
        
        // 显示通知
        function showNotification(type, title, message) {
            const notification = document.getElementById('notification');
            notification.querySelector('.notification-content h4').textContent = title;
            notification.querySelector('.notification-content p').textContent = message;
            notification.querySelector('.alert-time').textContent = new Date().toLocaleTimeString() + ' · 位置: ' + getRandomLocation();
            
            if (type === 'warning') {
                notification.className = 'notification warning show';
                notification.querySelector('i').className = 'fas fa-exclamation-triangle';
            } else {
                notification.className = 'notification show';
                notification.querySelector('i').className = 'fas fa-exclamation-circle';
            }
            
            setTimeout(() => notification.classList.remove('show'), 5000);
        }
        
        // 添加告警到列表
        function addAlertToList(type, title, message) {
            const alertList = document.getElementById('alertList');
            const alertItem = document.createElement('div');
            alertItem.className = `alert-item ${type === 'warning' ? 'warning' : ''}`;
            alertItem.innerHTML = `
                <div class="alert-header">
                    <strong>${title}</strong>
                    <span class="alert-time">刚刚</span>
                </div>
                <div class="alert-content">
                    <i class="fas ${type === 'warning' ? 'fa-exclamation-triangle' : 'fa-exclamation-circle'}"></i>
                    <span>${message}</span>
                </div>
            `;
            alertList.insertBefore(alertItem, alertList.firstChild);
        }
        
        // 获取随机位置
        function getRandomLocation() {
            const cities = ['上海', '北京', '广州', '深圳', '南京', '杭州'];
            return cities[Math.floor(Math.random() * cities.length)] + '方向' + Math.floor(Math.random() * 200) + '公里';
        }
        
        // 随机告警
        setInterval(() => {
            const alerts = [
                {type: 'danger', title: '超速告警', message: `货车${getRandomPlate()}在${getRandomRoad()}超速行驶(${95+Math.floor(Math.random()*15)}km/h)`},
                {type: 'warning', title: '路线偏离', message: `货车${getRandomPlate()}偏离预定路线超过${5+Math.floor(Math.random()*10)}公里`},
                {type: 'warning', title: '异常停留', message: `货车${getRandomPlate()}在服务区停留超时(${30+Math.floor(Math.random()*60)}分钟)`}
            ];
            
            const alert = alerts[Math.floor(Math.random() * alerts.length)];
            showNotification(alert.type, alert.title, alert.message);
            addAlertToList(alert.type, alert.title, alert.message);
        }, 15000);
        
        // 生成随机车牌
        function getRandomPlate() {
            const letters = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
            return letters[Math.floor(Math.random() * letters.length)] + '-' + Math.floor(1000 + Math.random() * 9000);
        }
        
        // 获取随机道路
        function getRandomRoad() {
            const roads = ['G15高速', 'G42高速', 'G50高速', '京沪高速', '沪昆高速'];
            return roads[Math.floor(Math.random() * roads.length)];
        }
    </script>
</body>
</html>